<template>

<div class="movee">
    <van-image
  round
  width="10rem"
  height="10rem"
  src="./image/login.png"
/>
<div v-if="login_state==false">
<van-field v-model="username" label="用户名" placeholder="请输入用户名" />
  <van-field v-model="password" label="密码"  type="password" placeholder="请输入密码" />
    <van-button type="info" plain @click="login()">登录</van-button>
</div>   
<div v-if="login_state==true">
<h1>欢迎您，{{username}}</h1>
<van-button type="info" size="large" @click="outlogin()">退出登录</van-button>
</div>
    <low-change></low-change>

</div>
 

</template>
<script>
import { Toast } from 'vant'
import  lowchange from '../components/lowchange'
import network from '../network'
import lowchangeVue from '../components/lowchange.vue'
export default {
    components:{
        "low-change":lowchange,
    },
    data(){
            return{
         username:"",
         password:"",
         login_state:false,
         login_information:[],
        }
    },
    created: function () {
       if(localStorage.getItem("token")!=null)
       {
         this.login_state=true;
         this.username=localStorage.getItem("username");
       }
    },
    methods:{
       
    login()
    {
       let self=this; 
         if(self.username==0||self.password==0)
        {
           Toast("请输入账户名或密码！");
        }
        else
        {
        network.login_request(this.username,this.password).then(function(response1) {
        self.login_information = response1.data;
        if(response1.data.state=="true")
        {
           localStorage.setItem("token",response1.data.token);
           localStorage.setItem("username",response1.data.username);
           localStorage.setItem("user_id",response1.data.user_id);
           self.login_state=true;
        }
        else
        {
            Toast("密码或用户名错误，请重新输入！");
        }
        });
      }  
      
     

    },
      outlogin()
      {
        localStorage.removeItem("token");
        localStorage.removeItem("username");
        localStorage.removeItem("user_id");
        this.login_state=false;
  
      }
   
    }   
}
</script>
<style>
    .movee{
    position:relative;
        top:150px;
     width: 500px;
     height: 300px;
     display: table-cell; 
     vertical-align: middle;
     text-align: center; 
        }
    
</style>